<template>
<div class="aboutUs">
  <img src="./../assets/product/pCarousel.png" alt="pCarousel" class="pCarousel">
  <h3 class="title">ABOUTUS</h3>
  <p class="brif">关于我们</p>
  <div class="content">
    <div class="top">
      <div class="mission">
        <img src="./../assets/aboutUs/mission.png" width="345" height="345" alt="mission">
        <div class="word">
          <p>链接净水产品行业链</p>
          <p>引领世界净水产品的科技发展</p>
        </div>
      </div>
      <div class="hope">
        <div class="word">
          <p>助力改革传统净水方式，使喝水更加方便。</p>
          <p>助力推动工业污水净化，使水质量得到保证。</p>
          <p>助力中国净水产品成为全球品牌</p>
        </div>
        <img src="./../assets/aboutUs/hope.png" height="345" width="345" alt="hope">
      </div>
    </div>
    <div class="middle">
      <img src="./../assets/aboutUs/organization.png" height="942" width="650" alt="organization">
    </div>
    <div class="bot">
      <h3>合作伙伴</h3>
      <div class="banner">
        <img src="./../assets/aboutUs/left.svg" alt="left" @click="toLeft">
        <div class="outer">
          <div class="bs">
            <div class="block">
              <img src="./../assets/aboutUs/fcssc.png" height="252" width="268" alt="fcssc">
            </div>
            <div class="block">
              <img src="./../assets/aboutUs/fcssc.png" height="252" width="268" alt="fcssc">
            </div>
            <div class="block">
              <img src="./../assets/aboutUs/fcssc.png" height="252" width="268" alt="fcssc">
            </div>
            <div class="block">
              <img src="./../assets/aboutUs/fcssc.png" height="252" width="268" alt="fcssc">
            </div>
            <div class="block">
              <img src="./../assets/aboutUs/fcssc.png" height="252" width="268" alt="fcssc">
            </div>
          </div>
        </div>
        <img src="./../assets/aboutUs/right.svg" alt="right" @click="toRight">
      </div>
    </div>
  </div>
</div>
</template>

<script>
import jQuery from 'jquery'
export default {
  data() {
    return {
      num: -1,
      oNum: -1
    }
  },
  methods : {
    toLeft() {
      if(this.num > 0){
        jQuery('.bs').animate({
          left: '-=16.5rem'
        }, 600, function() {

        });
        this.num = this.num - 1;
      }
    },
    toRight() {
      if(this.oNum > this.num){
        jQuery('.bs').animate({
          left: '+=16.5rem'
        }, 600, function() {

        });
        this.num = this.num + 1;
      }
    },
    getNum() {
      this.num = jQuery('.block').length-2;
      this.oNum = jQuery('.block').length-1;
    }
  },
  mounted() {
    this.getNum();
  }
}
</script>

<style scoped>
.pCarousel {
  width: 100%;
}
.content > div {
  padding: 1rem 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid #dddddd;
}
.bot {
  border-bottom: none !important;
}
.mission, .hope {
  display: flex;
}
.word {
  font-size: 1.8rem;
  margin-top: 3.5rem;
  height: 2.8rem;
  line-height: 2.8rem;
}
.mission {
  justify-content: flex-start;
}
.hope {
  justify-content: flex-end;
}
.middle img {
  display: block;
  margin: 0 auto;
  height: 35rem;
}
.bot>h3 {
  text-align: center;
  margin: 1rem 0 2rem;
  font-size: 2rem;
}
.banner{
  display: flex;
  justify-content: space-between;
}
.banner > img {
  cursor: pointer;
}
.outer {
  overflow: hidden;
}
.bs {
  width: 1000rem;
  overflow: hidden;
  height: 11.5rem;
  position: relative;
}
.block {
  width: 14rem;
  height: 11.5rem;
  border: 5px solid #cccccc;
  padding: 1rem;
  float: left;
  display: inline-block;
  margin-left: 2.5rem;
}
.block > img {
  width: 11.5rem;
  height: 9.5rem;
}
</style>
